<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B站小电视</title>
    <link rel="shortcut icon" href="./assets/bilibili.ico" type="image/x-icon">
    <link rel="stylesheet" href="/style/button.css">
    <link rel="stylesheet" href="./style/small.css" media="(min-device-width:300px) and (max-device-width:800px)">
    <link rel="stylesheet" href="./style/big.css" media="(min-device-width:1000px)">
    <link href="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.0.0-alpha0/styles/github.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.0.0-alpha0/highlight.min.js"></script>
    <!-- and it's easy to individually load additional languages -->
    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.0.0-alpha0/languages/css.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="codeblock" id="codeblock">
            <pre><code class="css" id="code"></code></pre>
            <div class="actions">
                <button class="btn" id="btn_play"><span>播放</span></button>
                <button class="btn" id="btn_pause"><span>暂停</span></button>
                <button class="btn" id="btn_fast"><span>快速</span></button>
                <button class="btn" id="btn_intermediate"><span>中速</span></button>
                <button class="btn" id="btn_slow"><span>慢速</span></button>
            </div>
        </div>

        <div id="demo" class="demo"></div>
        <div class="box">
            <div class="logo">
                <div class="logo-face"></div>
                <div class="left-line"></div>
                <div class="right-line"></div>
                <div class="eye">
                    <div class="left-eye"></div>
                    <div class="right-eye"></div>
                </div>
                <div class="left-nose"></div>
                <div class="right-nose"></div>
                <div class="end-of-nose"></div>
            </div>
        </div>
    </div>
    <script>
        // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
        let vh = window.innerHeight * 0.01;
        // Then we set the value in the --vh custom property to the root of the document
        document.documentElement.style.setProperty('--vh', `${vh}px`);
        // We listen to the resize event
        window.addEventListener('resize', () => {
            // We execute the same script as before
            let vh = window.innerHeight * 0.01;
            document.documentElement.style.setProperty('--vh', `${vh}px`);
        });
    </script>
    <script src="./script/main.js"></script>
</body>

</html>